<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/public.css" media="all" />
	</head>
	<body class="loginBody" style="overflow-y: hidden;">
		<div id="app">
			<div class="login_face" style="position: relative;top: 150px;"><img src="images/face.jpg" class="userAvatar"></div>
			<div class="login-container" style="margin-top: -70px;">
				<el-form :model="ruleForm" :rules="rules"
						 status-icon
						 ref="ruleForm"
						 label-position="left"
						 label-width="0px"
						 class="demo-ruleForm login-page">
					<h3 class="title">系统登录</h3>
					<el-form-item prop="loginname">
						<el-input type="text"
								  v-model="ruleForm.loginname"
								  auto-complete="off"
								  placeholder="用户名"
						></el-input>
					</el-form-item>
					<el-form-item prop="pwd">
						<el-input type="password"
								  v-model="ruleForm.pwd"
								  auto-complete="off"
								  placeholder="密码"
						></el-input>
					</el-form-item>
					<el-form-item prop="code">
						<el-input type="text"
								  v-model="ruleForm.code"
								  auto-complete="off"
								  placeholder="验证码"
								  style="width: 65%"
						></el-input>
						<span @click="getCode">
							<el-image
							  class="code-img"
							  :src="codePath"
							/>
						</span>
					</el-form-item>
					<el-form-item style="width:100%;">
						<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	  new Vue({
		el: '#app',
		  data() {
			  return {
				  logining: false,
				  codePath:'',
				  ruleForm: {
					  loginname: 'admin',
					  pwd: '123456',
					  code:''
				  },
				  rules: {
					  loginname: [{required: true, message: '请输入用户名', trigger: 'blur'}],
					  pwd: [{required: true, message: '请输入密码', trigger: 'blur'}],
					  code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
				  }
			  }
		  },
		  created() {
		  	 this.getCode()
		  },
		  methods: {
			  getCode(){
				let _this = this
				axios.get('http://localhost:8181/getCode').then(function(response){
					_this.codePath = response.data
				})
			  },
			  handleSubmit(){
				  this.$refs.ruleForm.validate((valid) => {
					  if(valid){
						  this.logining = true
						  let _this = this
						  axios.get('http://localhost:8181/login', {params:_this.ruleForm}).then(function (response) {
							  _this.logining = false
							  if(response.data.code == -1){
								  _this.$alert(response.data.msg, '提示', {
									  confirmButtonText: '确定'
								  })
							  }
							  if(response.data.code == 0){
								  localStorage.setItem('user', JSON.stringify(response.data.user));
								  location.href="index.html"
							  }
						  })
					  }else{
						  console.log('error submit!');
						  return false;
					  }
				  })
			  }
		  }
	  })
	</script>
	<style scoped>
		.login-container {
			width: 100%;
			height: 100%;
		}
		.login-page {
			-webkit-border-radius: 5px;
			border-radius: 5px;
			margin: 180px auto;
			width: 350px;
			padding: 35px 35px 15px;
			background: #fff;
			border: 1px solid #eaeaea;
			box-shadow: 0 0 25px #cac6c6;
		}
		label.el-checkbox.rememberme {
			margin: 0px 0px 15px;
			text-align: left;
		}
		  .code-img {
			width: 113px;
			height: 40px;
			margin-left: 8px;
			position: absolute;
			cursor: pointer;
		  }
	</style>
</html>
